@import '../config/import';

.hamburger {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;

  &__content {
    background: var(--card-bg);
    max-width: var(--layout-drawer-width);
    width: 90%;
    z-index: var(--z-elevate);
    position: fixed;
    height: 100%;
    overflow-y: auto;

    &__header {
      min-height: var(--header-height);
      display: flex;
      align-items: center;
      padding: 0 var(--su-2) 0 var(--su-4);
      justify-content: space-between;
    }
  }

  &__overlay {
    background: var(--base-100);
    opacity: 0.5;
    position: absolute;
    inset: 0;
  }

  body[data-left-nav-state='open'] & {
    display: block;
    @media (min-width: $breakpoint-m) {
      display: none;
    }
  }
}

body[data-left-nav-state='open'] {
  @media (max-width: $breakpoint-m) {
    overflow: hidden;
  }
}
